import { Col, Dropdown, Menu, Row } from 'antd'
import React, {Component, Suspense, useEffect} from 'react'
import { GridContent } from '@ant-design/pro-layout'
import { connect } from 'umi'
import {getBankCardNum, getMainInfo, getPreInfo} from './service'
import PageLoading from './components/PageLoading'
import './index.less'

import IntroduceRow from './components/IntroduceRow'
import AppsPortal from './components/AppsPortal'
import TodoPortal from './components/TodoPortal'
import MessagePortal from './components/MessagePortal'
import NotifyPortal from './components/NotifyPortal'
import WorkCalendar from './components/WorkCalendar'

// const IntroduceRow = React.lazy(() => import('./components/IntroduceRow'))
// const AppsPortal = React.lazy(() => import('./components/AppsPortal'))
// const TodoPortal = React.lazy(() => import('./components/TodoPortal'))
// const MessagePortal = React.lazy(() => import('./components/MessagePortal'))
// const NotifyPortal = React.lazy(() => import('./components/NotifyPortal'))

class Workplace extends Component {
  state = {
    mainInfo: {},
    preInfo: {},
    upcomingList: []
  }

  componentDidMount () {
    const { dispatch } = this.props
    // this.reqRef = requestAnimationFrame(() => {
    //   dispatch({
    //     type: 'workplace/fetch',
    //   })
    // });
    getMainInfo().then(res => {
      this.setState({mainInfo: res});
    });
    getPreInfo().then(res=>{
      this.setState({preInfo: res});
    })
    getBankCardNum().then(res => {
      this.setState({bankCardNum: res});
    })
  }

  render () {
    const { workplace, loading,currentUser } = this.props;
    return (
      <div className="workplace">
        <GridContent>
          <React.Fragment>
            <Suspense fallback={<PageLoading/>}>
              <IntroduceRow loading={loading} visitData={this.state.mainInfo}/>
            </Suspense>

            <Row gutter={24} style={{  marginBottom: 24}}>
              <Col xl={8} lg={8} md={8} sm={8} xs={8}>
                <Suspense fallback={null}>
                  <AppsPortal router={history} loading={loading}/>
                </Suspense>
              </Col>
              <Col style={{flex:1}}>
                <Suspense fallback={null}>
                  <TodoPortal loading={loading} currentUser={currentUser} bankCardNum={this.state.bankCardNum} preInfo={this.state.preInfo}/>
                </Suspense>
              </Col>
            </Row>

            <Row gutter={24}>
              <Col xl={10} lg={10} md={10} sm={10} xs={10}>
                <Suspense fallback={null}>
                  <MessagePortal loading={loading}/>
                </Suspense>
              </Col>
              <Col xl={8} lg={8} md={8} sm={8} xs={8}>
                <Suspense fallback={null}>
                  <WorkCalendar loading={loading}/>
                </Suspense>
              </Col>
              <Col xl={6} lg={6} md={6} sm={6} xs={6}>
                <Suspense fallback={null}>
                  <NotifyPortal loading={loading}/>
                </Suspense>
              </Col>
            </Row>
          </React.Fragment>
        </GridContent>
      </div>
    )
  }
}

export default connect(({ workplace, loading,user }) => ({
  workplace,
  loading: loading.effects['workplace/fetch'],
  currentUser: user.currentUser,
}))(Workplace)
